<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>微电影</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/static/base/images/logo.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap-movie.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/animate.css">
    <style>
        .navbar-brand>img {
            display: inline;
        }
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
            padding-right: 3px;
            padding-left: 3px;
        }
        .media{
            padding:3px;
            border:1px solid #ccc
        }
    </style>
</head>

<body>
<!--导航-->
<%@include file="includetop.jsp"%>
<!--导航-->
<!--内容-->
<div class="container" style="margin-top:76px">
    <div class="col-md-3">
        <div class="list-group">
            <a href="#" class="list-group-item active">
                <span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
            </a>
             <a href="/person/updatePassword" class="list-group-item">
                <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
            </a>
            <a href="/comment/adminComment/${sessionScope.userName}" class="list-group-item">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
            </a>
            <a href="/person/getlogs" class="list-group-item">
                <span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
            </a>
            <a href="/admin/adminFavoriteVideosId/${sessionScope.userId}" class="list-group-item">
                <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
            </a>
        </div>
    </div>
    <div class="col-md-9">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;会员中心</h3>
            </div>
            <div class="panel-body">
                <form id="inform-form" enctype="multipart/form-data">
                    <input id="input_Role" type="text" hidden="hidden" autofocus <c:if test="${personInform!=null}">value="${personInform.personRole}" </c:if>>
                            <div class="form-group">
                                <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
                                <input id="input_name" class="form-control" placeholder="昵称" name="name" type="text" autofocus <c:if test="${personInform!=null}">value="${personInform.personName}"</c:if>>
                            </div>
                            <div class="col-md-12" id="error_name"></div>
                            <div class="form-group">
                                <label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
                                <input id="input_email" class="form-control" placeholder="邮箱" name="email" type="email" autofocus <c:if test="${personInform!=null}">value="${personInform.personEmail}" </c:if>>
                            </div>
                            <div class="col-md-12" id="error_email"></div>
                            <div class="form-group">
                                <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
                                <input id="input_phone" class="form-control" placeholder="手机" name="phone" type="text" autofocus <c:if test="${personInform!=null}">value="${personInform.personPhone}" </c:if>>
                            </div>
                            <div class="col-md-12" id="error_phone"></div>
                            <div class="form-group">
                                <label for="input_face"><span class="glyphicon glyphicon-picture"></span>&nbsp;头像</label>
                                <input id="input_face" class="form-control" name="face" type="hidden" autofocus>
                                <c:choose>
                                    <c:when test="${personInform.personImage!=null}">
                                        <img width="200" height="200" src="${pageContext.request.contextPath}/resource/static/base/person/${personInform.personImage}">
                                    </c:when>
                                    <c:otherwise><img src="holder.js/100x100" class="img-responsive img-rounded"></c:otherwise>
                                </c:choose>
                                    <input type="file" onchange="uploadImageFile1(this)" accept="image/*" class="img-responsive">

                            </div>
                            <div class="col-md-12" id="error_face"></div>
                            <div class="form-group">
                                <label for="input_info"><span class="glyphicon glyphicon-edit"></span>&nbsp;简介</label>
                                    <c:choose>
                                        <c:when test="${personInform.personIntroduction!=null}"><textarea class="form-control" rows="10" id="input_info">${personInform.personIntroduction}</textarea></c:when>
                                        <c:otherwise><textarea class="form-control" rows="10" id="input_info">这只咸鱼很懒，什么都没有留下~</textarea></c:otherwise>
                                    </c:choose>

                            </div>

                            <div class="col-md-12" id="error_info"></div>
                        <input type="submit" value="保存修改" class="btn btn-success">
                </form>
            </div>
        </div>
    </div>
</div>
<!--内容-->
<!--底部-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    ©&nbsp;2017&nbsp;flaskmovie.imooc.com&nbsp;京ICP备 13046642号-2
                </p>
            </div>
        </div>
    </div>
</footer>
<!--底部-->
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery-3.5.1.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.singlePageNav.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/wow.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/lazyload/jquery.lazyload.min.js"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script>
    $(document).ready(
        function () {
            $("#inform-form").on("submit", function () {
                var name= $("#input_name").val();
                var email= $("#input_email").val();
                var phone= $("#input_phone").val();
                var introduction= $("#input_info").val();
                var role=$("#input_Role").val()
                var rdata={
                    "personName":name,
                    "personEmail":email,
                    "personPhone":phone,
                    "personIntroduction":introduction,
                    "personRole":role
                }
                $.ajax({
                    url:"/person/toSave",
                    data:rdata,
                    type:"post",
                    dataType:"json",
                    success:function (res) {
                        alert(res.msg);
                        if(res.code=="200"){
                            location.href="/person/toUserInformation"

                        }

                    },
                    error:function (e1,e2,e3) {
                        console.log(e1);
                        console.log(e2);
                        console.log(e3);
                    }
                })
                return false;
            })
        }
    )

    function uploadImageFile1(element){
        var image = element.files[0];
        var role=$("#input_Role").val();
        var data=new FormData();
        data.append("image",image);
        data.append("role",role);
        $.ajax({
            url:"/person/upload",
            data:data,
            type:"post",
            dataType:"json",
            contentType:false,
            processData:false,
            mimeType: "multipart/form-data",
            success:function (res){
                if(res.code == 200){
                    alert("上传成功")
                    //重新加载页面，图片回显
                    if(res.code=="200"){
                        location.href="/person/toUserInformation"
                    }

                }else{
                    alert(res.msg);
                }
            },
            error:function (){
                alert("上传失败，请稍候再试");
            }
        });
    }
</script>
<script>

</script>
</body>
</html>
